<template>
    <view>
		<view class="fanhui" @click="fanhui">
			<image  src="https://wechat-pictures-1301970825.file.myqcloud.com/yangji/fanhui.png"></image>
		</view>
        <view class="content" style="background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/yangji/qiandao.png)">


            <view class="box">
                <view style="height: 5upx;width: 100%;"></view>
                <view class="box-list" v-for="item in list">
                     <!-- start -->
                    <view class="box-list-top">
                        <!-- 底部奖励-物品 -->
                       <image v-if="item.uni_code == 'jia_su_ka'" class="jiangli"  src="https://wechat-pictures-1301970825.file.myqcloud.com/yangji/jiasu.png" mode=""></image>
                       <view v-if="item.uni_code == 'jia_su_ka'" style="color: #FC5400;" class="jiangli-text">加速卡</view>

                       <image v-if="item.uni_code == 'si_liao'" class="jiangli"  src="https://wechat-pictures-1301970825.file.myqcloud.com/yangji/siliao.png" mode=""></image>
                       <view v-if="item.uni_code == 'si_liao'" class="jiangli-text">饲料卡</view>

                        <!-- 底部奖励-未签到 -->
                        <!-- <view  class="qiandao">签到</view> -->
                        <view v-if="item.is_dayu_today == 0 & item.is_lingqu == 0 & item.is_today == 0" class="lingqu"></view>
                        <!-- <view v-if="item.is_dayu_today == 0 & item.is_lingqu == 0 & item.is_today == 0" class="lingqu-box">未领取</view> -->


                        <!-- 已领取-展示 start-->
                       <view v-if="item.is_lingqu == 1" class="lingqu"></view>
                        <view v-if="item.is_lingqu == 1" class="lingqu-box">已领取</view>
                        <!-- 已领取-展示 end-->

                        <!-- 待领取-展示 start-->
                        <view v-if="item.is_today == 1 & item.is_lingqu == 0" class="lingqu-t"></view>
                        <view v-if="item.is_today == 1 & item.is_lingqu == 0" class="btn-lingqu" @click="lingqu(item.id)">领取</view>
                        <!-- 待领取-展示 end-->

                    </view>
                    <!-- end -->
                    <view :class="item.is_today == 1 ? 'box-list-bottom box-list-bottom-red' : 'box-list-bottom'">{{ item.ri_qi }}</view>
                </view>
            </view>




        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list:[]
            }
        },
        onLoad() {
            this.getList();
        },
        methods: {
            // 获取数据
            getList() {
                this.$api.doRequest("get", 'api/thirty_signin_prize_info2', {}).then(res => {
                    if(res.data.code == 200) {
                        console.log(res.data.data)
                        this.list = res.data.data;
                    }
                })
            },
            lingqu(id) {
                this.$api.doRequest("get", 'api/thirty_signin_get_prize2', {}).then(res => {
                    if(res.data.code == 200) {
                        console.log(res)
                        this.getList();
                    }
                })
            },
			fanhui()
			{
				uni.redirectTo({
					url:"../index/index"
				})
			}
        },
    }
</script>

<style>
.content {
    width: 100vw;
    height: 120vh;
    background-size:cover;
    position: relative;
    /* background-repeat: no-repeat; */
}
.box {
    width: 690upx;
    height: 75vh;
    background-color: #fff;
    border-radius: 30upx;
    position: absolute;
    left:30upx;
    top:420upx;
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
}
.box-list {
    width: 130upx;
    height: 140upx;
    text-align: center;
}
.box-list-top {
    width: 110upx;
    height: 110upx;
    border-radius: 55upx;
    background-color: #F0F0F0;
    margin:0 auto;
    position: relative;
    overflow: hidden;
}
.box-list-bottom {
    font-size: 28upx;
    font-family: DINPro-Medium, DINPro;
    color: #ccc;
}
.box-list-bottom-red {
    color:#EF3023;
}
.lingqu {
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.4;
    position: absolute;
    left: 0;
    top: 0;
}
.lingqu-t {
    width: 100%;
    height: 100%;
    background-color:#FE640B;
    opacity: 0.6;
    position: absolute;
    left: 0;
    top: 0;
}
.lingqu-box {
    width: 92upx;
    height: 42upx;
    font-size: 24upx;
    background-color: #fff;
    border: 2upx solid #FE640B;
    transform: rotate(-25deg);
    margin: 0 auto;
    position: absolute;
    left: 8upx;
    top: 32upx;
    color:#FE640B;
    font-weight: 500;
    z-index: 2;
	line-height: 42upx;
}
.btn-lingqu {
    width: 110upx;
    height: 110upx;
    line-height: 110upx;
    text-align: center;
    color:#fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
}
.jiangli {
    width:55upx;
    height:55upx;
    margin:0 auto;
    margin-top: 10upx;
}
.jiangli-text {
    font-size: 20upx;
    color:#B2B2B2;
}
.qiandao {
    width: 110upx;
    height: 110upx;
    line-height: 110upx;
    text-align: center;
    background-color: #FFF4E9;
    color:#B2B2B2;
}
	.fanhui{
		width: 48upx;
		height: 48upx;
		position: fixed;
		top: 108upx;
		left: 16upx;
		z-index: 10;
	}
	.fanhui image{
		width: 100%;
		height: 100%;
	}
</style>
